{% extends 'layout/basic.html' %}

{% block title %}用户注册{% endblock %}

{% block content %}

    <h1 style="text-align: center">注册</h1>
    <div style="margin: 0 auto;width: 400px">

        <form id="regForm" action="/register/" method="post">
            {% csrf_token %}
            {% for field in form %}
                <div class="form-group">
                    <lable for="{{ field.id_for_label }}">{{ field.label }}</lable>
                    {{ field }}
                    <span style="color: red" class="error-msg"></span>
                </div>
            {% endfor %}
            <input id="btnSubmit" type="button" class="btn btn-primary" value="注册">
        </form>
    </div>>
{% endblock %}

{% block js %}

    <script>
        //页面加载完成后自动执行
        $(function () {
            bindClickSubmit();
        })
        //点击提交 注册
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url:'{% url 'register' %}',
                    type:'POST',
                    data:$('#regForm').serialize(), //所有字段数据
                    dataType:'JSON',
                    success:function (res) {
                        if (res.status){
                            location.href = res.data;
                        }else {
                            $.each(res.error,function (key,value) {
                                $('#id_' + key).next().text(value[0])
                            })
                        }
                    }
                })
            })
        }
    </script>

{% endblock %}





